<template>
  <view class="main">
    <view class="header">
      <view class="search-box">
        <image class="search-icon" src="@/static/svg/icon_search.svg" />
        <input class="search-input" v-model="keyword" confirm-type="search" @confirm="handleSearch()" placeholder="搜索商品名称/编码/条码" />
      </view>
    </view>
    <view class="body">
      <view class="classify-list classify-groups">
        <scroll-view class="scroll-view" scroll-x="true">
          <view v-for="(item, index) in groupTags" :key="index" class="group_item" :class="{'active': groupCurIndex === index }" @click="groupCurIndex = index">
            {{item.tagName}}
          </view>
        </scroll-view>
      </view>
      <view class="classify-list classify-items">
        <scroll-view class="scroll-view" scroll-x="true">
          <view class="sub-header" v-if="groupTags.length">
            <view class="sub-all-btn" @click="handelTagGroup">全部{{groupTags[groupCurIndex].tagName}}</view>
          </view>
          <view v-for="(item, index) in subGroups" :key="index" class="group_item" @click="handelTagItem(item)">
            <text class="text">{{item.tagName}}</text>
            <image class="icon" src="@/static/svg/right-outlined.svg" />
          </view>
        </scroll-view>
      </view>

    </view>

    <TabBar></TabBar>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

import { sortBy, orderBy } from 'lodash-es'

import { getTagListAllApi } from '@/api/product'

const groupTags = ref([])
const groupCurIndex = ref(0)
const subGroupsIndex = ref(0)

const keyword = ref('')

const subGroups = computed(()=> {
  if(groupTags.value.length) {
    return groupTags.value[groupCurIndex.value].subGroups
  }
  return []
  
})

onLoad(()=> {
  init()
})

onPullDownRefresh( async ()=> {
  await init().finally(() => {
    uni.stopPullDownRefresh();
  });
})


async function init() {
  await getTagListAll()
}
async function getTagListAll(){
  // debugger
  const res = await getTagListAllApi({type: 1})
  groupTags.value =  getListGroup(res)
  // console.log('groupTags', groupTags)
}

function getListGroup(list){
  const listLevelAsc = orderBy(list, ['level', 'showOrder'], ['asc', 'asc'])
  const obj = {};
  const newList = []
  for(let item of listLevelAsc) {
    if(item.parentId) {
      if(!obj[item.parentId]){
        obj[item.parentId] = []
      }
      obj[item.parentId].push(item)
    }else {
      newList.push(item)
    }
  }
  function setSubGroups(arr, parents = []){
    for(let i = 0 ; i < arr.length; i++) {
      const { id } = arr[i];
      arr[i].subGroups = obj[id] || []
      arr[i].parents = [...parents]
      const subParents = parents.concat([{ ...arr[i], subGroups: []}])
      setSubGroups(arr[i].subGroups,  subParents)
    }
  }
  setSubGroups(newList)
  return newList
  // console.log('listLevelAsc', listLevelAsc, newList)

}

function handelTagGroup(){
  const groupId = groupTags.value[groupCurIndex.value].id
  uni.navigateTo({
    url: '/pages/product/index?tagId=' + groupId
  })
}
function handelTagItem(tag){
  // const groupId = groupTags.value[groupCurIndex.value].id
  // const tags = [groupId, tag.id]
  uni.navigateTo({
      url: `/pages/product/index?tagId=${tag.id}`
  })
}

  function handleSearch(e){
    console.log(e);
    uni.navigateTo({
        url: '/pages/product/index?keyword=' + keyword.value
    })
  }
</script>

<style lang='scss' scoped>
.main{
  height: 100vh;
  background: #FCFCFC;
  display: flex;
  flex-direction: column;
  .header{
    height: 112rpx;
    background: #FFFFFF;
    border: 1rpx solid #EEEEEE;
    padding: 18rpx 32rpx;
    .search-box{
      height: 100%;
      background: #F2F2F2;
      border-radius: 55rpx;
      position: relative;
      .search-icon{
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        width: 28rpx;
        height: 28rpx;
        left: 32rpx;
      }
      .search-input{
        display: flex;
        height: 100%;
        padding-left: 76rpx;
        align-items: center;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 34rpx;
      }
    }

  }
  .body{
    flex: 1;
    display: flex;
    .classify-list{
      height: 100%;

      .scroll-view{
        height: 100%;
      }
    }
    .classify-groups{
      // width: 172rpx;
      // width: 200rpx;
      max-width: 240rpx;
      min-width: 180rpx;
      background: #F2F2F2;
      .group_item{
        height: 90rpx;
        line-height: 90rpx;
        border-left: transparent 4rpx solid;
        font-weight: 500;
        font-size: 28rpx;
        color: #282828;
        padding: 0 20rpx 0 30rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.active{
          background: #FFFFFF;
          border-left: #FF8F1F 4rpx solid;
        }
      }
    }
    .classify-items{
      flex: 1;
      height: 100%;
      .sub-header{
        background: #fff;
        padding: 24rpx 32rpx;
        margin-bottom: 20rpx;
        border-bottom: #FCFCFC;
        .sub-all-btn{
          height: 72rpx;
          background: #FFFFFF;
          border-radius: 36rpx;
          border: 1rpx solid #FF8F1F;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #FF8F1F;
        }
      }
      .group_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;
        line-height: 36rpx;
        background: #fff;
        margin-bottom: 20rpx;
        border-bottom: #FCFCFC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        .text{
          color: #333333;
        }
        .icon{
          width: 32rpx;
          height: 32rpx;
          fill: #999;
        }
      }
    }
  }
}
</style>
